<template>
  <div class="app-container">
    <h1 style="text-align: center;margin-bottom: 20px;margin-top: 20px">动态配置中心</h1>
    <div class="app-form">
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="card">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="span-text">维保任务参数设置</span>
                <el-button style="float: right" :loading="balanceLoading" type="primary" @click="updateInDynamicConfig()">保存</el-button>
              </div>
              <el-form :model="dynamicConfigForm" ref="dynamicConfigForm" :rules="dynamicConfigFormRules"
                       label-width="80px">
                <el-form-item label="完成率" prop="value">
                  <el-input type="number" v-model="dynamicConfigForm.value" clearable>
                    <template slot="append">%</template>
                  </el-input>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card">
            <el-card class="box-card">
              <div slot="header" class="clearfix">
                <span class="span-text">维保工单参数设置</span>
                <el-button style="float: right" :loading="balanceLoading" type="primary" @click="updateInDynamicConfig1()">保存</el-button>
              </div>
              <el-form :model="dynamicConfigForm1" ref="dynamicConfigForm1" :rules="dynamicConfigFormRules2"
                       label-width="120px">
                <el-form-item label="完成时间" prop="value">
                  <el-input type="number" v-model="dynamicConfigForm2.value" @change="changeEvent()"
                            placeholder="请输入大于0的整数" clearable>
                    <template slot="append">秒</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="text-align: right" class="dialog-footer">
                <el-button :loading="balanceLoading" type="primary" @click="updateInDynamicConfig2()">保存
                </el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="12">
          <div class="card">
            <el-card class="box-card" style="margin-bottom: 10px">
              <h3>隐患工单参数设置</h3>
              <el-form :model="dynamicConfigForm2" ref="dynamicConfigForm2" :rules="dynamicConfigFormRules2"
                       label-width="120px">
                <el-form-item label="完成时间" prop="value">
                  <el-input type="number" v-model="dynamicConfigForm2.value" @change="changeEvent()"
                            placeholder="请输入大于0的整数" clearable>
                    <template slot="append">秒</template>
                  </el-input>
                </el-form-item>
              </el-form>
              <div style="text-align: right" class="dialog-footer">
                <el-button :loading="balanceLoading" type="primary" @click="updateInDynamicConfig2()">保存
                </el-button>
              </div>
            </el-card>
          </div>
        </el-col>
        <el-col :span="12">
          <div class="card">
            <el-card class="box-card" style="margin-bottom: 10px">
              <h3>电子围栏设置</h3>
              <el-form :model="dynamicConfigForm3" ref="dynamicConfigForm2" :rules="dynamicConfigFormRules3"
                       label-width="120px">
                <el-form-item label="状态" prop="value">
                  <el-switch
                      v-model="value"
                      active-color="#13ce66"
                      inactive-color="#ff4949">
                  </el-switch>
                </el-form-item>
              </el-form>
              <div style="text-align: right" class="dialog-footer">
                <el-button :loading="balanceLoading" type="primary" @click="updateInDynamicConfig3()">保存
                </el-button>
              </div>
            </el-card>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script>
import {getInDynamicConfigVo, updateInDynamicConfig} from "@/api/dynamicConfig";

export default {
  name: "settings",
  data() {
    return {
      dynamicConfigForm: {},
      dynamicConfigForm1: {},
      dynamicConfigForm2: {},
      dynamicConfigForm3: {},
      cashLoading: false,
      balanceLoading: false,
      dynamicConfigFormRules: {},
      dynamicConfigFormRules1: {},
      dynamicConfigFormRules2: {},
      dynamicConfigFormRules3: {},
      value: false

    }
  },
  created() {
    this.getInDynamicConfigVo("completion-rate")
    this.getInDynamicConfigVo("delayed-time")
    this.getInDynamicConfigVo("electronic_fence_status")
  },
  methods: {
    changeEvent() {
      this.time = this.time * 60 * 60; /*将小时转换成秒*/
      console.log(this.time)
    },
    // getInDynamicConfigMap(){
    //   getInDynamicConfigVo({key: val}).then(res => {
    //     switch (val) {
    //       case "completion-rate":
    //         this.dynamicConfigForm = res.data
    //         break;
    //       case "delayed-time":
    //         this.dynamicConfigForm2 = res.data
    //         break;
    //       case "electronic_fence_status":
    //         if (res.data.value == "1") {
    //           this.value = true
    //         }
    //         break;
    //       default:
    //         break;
    //     }
    //   })
    // }
    getInDynamicConfigVo(val) {
      getInDynamicConfigVo({key: val}).then(res => {
        switch (val) {
          case "completion-rate":
            this.dynamicConfigForm = res.data
            break;
          case "delayed-time":
            this.dynamicConfigForm2 = res.data
            break;
          case "electronic_fence_status":
            if (res.data.value == "1") {
              this.value = true
            }
            break;
          default:
            break;
        }
      })
    },
    updateInDynamicConfig() {
      updateInDynamicConfig({key: "completion-rate", value: this.dynamicConfigForm.value}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "更新配置成功"
        })
      }).catch(res => {
        this.$notify.error({
          title: '失败',
          message: res.msg
        })
      })
    },
    updateInDynamicConfig2() {
      updateInDynamicConfig({key: "delayed-time", value: this.dynamicConfigForm2.value}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "更新配置成功"
        })
      }).catch(res => {
        this.$notify.error({
          title: '失败',
          message: res.msg
        })
      })
    },
    updateInDynamicConfig3() {
      let status = "0"
      if (this.value) {
        status = "1"
      }
      updateInDynamicConfig({key: "electronic_fence_status", value: status}).then(res => {
        this.$notify.success({
          title: '成功',
          message: "更新配置成功"
        })
      }).catch(res => {
        this.$notify.error({
          title: '失败',
          message: res.msg
        })
      })
    }

  },


}
</script>

<style scoped>
.app-form{
  margin-left: 15%;
  margin-right: 15%;
}
.card{
  margin: 10px auto;
  width: 90%;
}
.span-text{
  font-size: 0.19rem;
  font-weight: bold;
}
.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}
.clearfix:after {
  clear: both
}
</style>
